<template>
    <div class="container">
        <vue-cropper
                ref='cropper'
                :guides="true"
                :view-mode="1"
                :aspect-ratio="1"
                drag-mode="crop"
                :auto-crop-area="0.5"
                :min-container-width="containerWidth"
                :min-container-height="containerHeight"
                :background="true"
                :rotatable="true"
                :center="true"
                :src="imageSrc"
                :scalable="false"
                :zoomable="false"
                alt="Source Image"
                :img-style="{ 'width': '400px', 'height': '300px' }">
        </vue-cropper>
        <div style="position: fixed;width: 100%;bottom: 0;text-align: center;background: #000;padding: 6px 0;left: 0;">
            <van-icon name="close" @click="onClose" color="#fff" size="32px"
                      style="margin-right: 50px;vertical-align: top;"/>
            <van-icon name="success" @click="onCrop" color="#fff" size="32px" style="vertical-align: top;"/>
        </div>
    </div>
</template>

<script>
    import VueCropper from 'vue-cropperjs';
    import {UserInfo, PostUserInfo} from "../api/data";
    import {Uploader, Toast} from 'vant';

    export default {
        /**
         * 页面的初始数据
         */
        data() {
            return {
                // imageSrc: 'https://img.zcool.cn/community/0157955848b69ea801219c77902534.jpg@1280w_1l_2o_100sh.jpg',
                imageSrc: localStorage.getItem('avatar_path'),
                containerWidth: document.documentElement.clientWidth-20,
                containerHeight: document.documentElement.clientHeight -44
            }
        },
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
            // this.containerWidth  = document.documentElement.clientWidth;
            // this.containerHeight = document.documentElement.clientHeight;

        },

        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        mounted: function () {
            //this.$refs.cropper.replace(localStorage.getItem('avatar_path'));
            // alert(localStorage.getItem('avatar_path'));
        },
        methods: {
            onClose: function () {
                var _that = this;
                _that.$router.back();
            },
            onCrop: function () {
                var _that = this;
                var data  = this.$refs.cropper.getData(true);
                console.log(JSON.stringify(data));
                // alert(JSON.stringify(data));

                console.log(JSON.stringify({
                    src: localStorage.getItem('avatar_path'),
                    dst: '_documents/c.jpg',
                    overwrite: true,		// 旋转90度
                    width: 120,
                    height: 120,
                    quality: 100,
                    format: 'jpg',
                    clip: {
                        top: data.y,
                        left: data.x,
                        width: data.width,
                        height: data.height,
                    }
                }));

                plus.zip.compressImage({
                    src: localStorage.getItem('avatar_path'),
                    dst: '_documents/c.jpg',
                    overwrite: true,		// 旋转90度
                    // width: 120,
                    // height: 120,
                    quality: 100,
                    format: 'jpg',
                    clip: {
                        top: data.y + '',
                        left: data.x + '',
                        width: data.width + '',
                        height: data.height + '',
                    }
                }, function (e) {
                    console.log('compress');
                    var task = plus.uploader.createUpload("http://api.yyw66.cn/api/user/upload/one",
                        {method: "POST"},
                        function (t, status) {
                            //alert(t);
                            // alert(status);
                            // 上传完成
                            if (status == 200) {
                                //alert("Upload success: " + JSON.stringify(t));
                                //alert(t.responseText)
                                console.log(t.responseText);
                                let data = JSON.parse(t.responseText)
                                ///alert(data.data.url)//上传成功，后台返回的图片地址
                                //_that.avatar = data.data.url
                                //alert(this.avatar)
                                PostUserInfo(this.username, data.data.url, this.radio).then(res => {
                                    console.log(res.data)
                                    if (res.data.code == 1) {
                                        Toast('修改成功！')
                                        _that.$router.back();
                                    }
                                })
                            } else {
                                //alert("Upload failed: " + status);
                            }
                        }
                    );
                    task.addFile(e.target, {key: "file"});
                    task.setRequestHeader('XX-Device-Type', 'web');
                    task.setRequestHeader('XX-Api-Version', '1.1.0');
                    task.setRequestHeader('XX-Token', localStorage.getItem('token'));
                    task.start();
                }, function (error) {
                    console.log(JSON.stringify(error));
                    console.log('compress error');
                });
            },
        }
    }
</script>

<style>
    .container .cropper-bg {
        background: #000;
        overflow: hidden;
    }
</style>